import { Box, Container, Paper, Typography, Chip } from '@mui/material';
import { ReactNode } from 'react';
import { alpha } from '@mui/material/styles';

interface ToolPageTemplateProps {
    title: string;
    description: string;
    category?: string;
    categoryColor?: string;
    children: ReactNode;
}

const ToolPageTemplate = ({ 
    title, 
    description, 
    category, 
    categoryColor = '#1976d2',
    children 
}: ToolPageTemplateProps) => {
    return (
        <Container maxWidth="lg" sx={{ py: 4 }}>
            {/* 工具标题区域 */}
            <Box 
                sx={{ 
                    mb: 4,
                    textAlign: 'center',
                    p: 4,
                    background: `linear-gradient(135deg, ${alpha(categoryColor, 0.1)} 0%, ${alpha(categoryColor, 0.05)} 100%)`,
                    borderRadius: 3,
                    border: `1px solid ${alpha(categoryColor, 0.2)}`
                }}
            >
                <Typography 
                    variant="h3" 
                    component="h1"
                    sx={{ 
                        fontWeight: 700,
                        color: 'text.primary',
                        mb: 2
                    }}
                >
                    {title}
                </Typography>
                
                <Typography 
                    variant="h6" 
                    color="text.secondary"
                    sx={{ mb: 3 }}
                >
                    {description}
                </Typography>

                {category && (
                    <Chip 
                        label={category}
                        sx={{ 
                            bgcolor: alpha(categoryColor, 0.2),
                            color: categoryColor,
                            fontWeight: 600,
                            border: `1px solid ${alpha(categoryColor, 0.4)}`
                        }} 
                    />
                )}
            </Box>

            {/* 工具内容区域 */}
            <Paper 
                elevation={0}
                sx={{ 
                    p: 4,
                    borderRadius: 3,
                    border: '1px solid',
                    borderColor: 'divider',
                    minHeight: '60vh'
                }}
            >
                {children}
            </Paper>
        </Container>
    );
};

export default ToolPageTemplate;